<script setup>
import useArticleStore from '@/stores/article/index.js'
import {useRoute} from 'vue-router'
import {storeToRefs} from 'pinia'
import extractPairedTags from '@/utils/getContentHtml.js'
import {ref, watch, onMounted, computed} from 'vue'
import useLoginStore from '@/stores/user/index.js'
import router from '@/router/index.js'
import Emoji from '@/components/emoji/emoji.vue'
import HotTitle from '@/components/hot-title/hot-title.vue'
import useScroll from '@/utils/useScroll.js'
import LoverCollect from "@/components/lover-collect/lover-collect.vue";
import {isConcernUser} from "@/service/index.js";
import TopSearch from "@/components/top/top-search.vue";

//获取传递过来的文章id
const route = useRoute()
const newsId = route.query.id

const articleStore = useArticleStore()
const loginStore = useLoginStore()
articleStore.getDetailNews(newsId)
articleStore.getHotNewsList(10)
articleStore.getHotTitleAction()

const {newsInfo} = storeToRefs(articleStore)
//获取文章内容
const newHtmlArr = ref()
watch(newsInfo, (newValue, oldValue) => {
  // 调用递归函数来提取成对的标签
  newHtmlArr.value = extractPairedTags(newValue.content)

  //初次查询是否关注用户
  articleStore.isConcernUser(newsInfo.value.userId)
})

const backHomeBtn = async () => {
  await router.push('/home')
}

//再次刷新页面
const detailNews = (id) => {
  //再次调用接口
  articleStore.getDetailNews(id)
}

//获取img标签元素添加style样式
const itemContainer = ref([])

// setInterval(() => {
//   itemContainer.value.forEach((container, index) => {
//     const imgElement = container.querySelector('img')
//     if (imgElement) {
//       imgElement.style.width = '500px'
//       // imgElement.style.height = '400px'
//       // 添加其他样式
//     }
//   })
// }, 100)

const {isScrollBottom, scrollTop} = useScroll()

// //监听滚动
//热门文章侠士
const hotTitleRef = ref()
watch(scrollTop, (newValue) => {
  if (newValue >= 2000) {
    hotTitleRef.value.isShow = true
  } else {
    hotTitleRef.value.isShow = false
  }
})

// watch(isScrollBottom, (newValue) => {
//   console.log('isSc', isScrollBottom, 'new', newValue)
//   if (newValue) {
//     articleStore.loadIngMoreNews().then(() => {
//       isScrollBottom.value = false
//     })
//   }
// })

//文章详情按钮
const hotBtn = (newId) => {
  articleStore.getCommentFirstListAction(newId)
}


//关注
const concernBtn = async () => {
  //判断是否登录
  if (!loginStore.token) {
    //先登录
    //弹出弹窗登录窗口
    loginStore.isShow = true
    //重定向到首页
    await router.push("/home")
    return;
  }
  await articleStore.concern(newsInfo.value.userId)
  await articleStore.isConcernUser(newsInfo.value.userId)

}
//取消关注
const cancelConcernBtn = async () => {
  await articleStore.cancelConcern(newsInfo.value.userId)
  await articleStore.isConcernUser(newsInfo.value.userId)

}


</script>

<template>
  <top-search/>
  <div class="detail scroll-target">
    <div class="headers" @click="backHomeBtn">
    </div>
    <div class="content">
      <div class="left">
        <div class="top">
          <h2>{{ articleStore.newsInfo.title }}</h2>
          <p class="desc">
            <span>{{ articleStore.newsInfo.createdTime }}·</span>
            <span>{{ articleStore.newsInfo.labels }}</span>
          </p>
        </div>
        <div
            style="text-align: left"
            class="info"
            ref="itemContainer"
            v-for="(item, index) in newHtmlArr"
            :key="index"
            v-html="item"
        ></div>

        <!--        表情包-->
        <emoji/>
      </div>
      <div class="right">
        <div class="person-info">
          <img :src="articleStore.newsInfo.userImg"/>
          <p>{{ articleStore.newsInfo.labels }}</p>
          <el-button v-if="articleStore.isConcern===0" @click="concernBtn" type="danger">关注</el-button>
          <el-button v-else @click="cancelConcernBtn" type="danger">取消关注</el-button>
        </div>
        <p class="hot-work">TA的热门作品</p>
        <ul class="hot-news-article" v-for="(item, index) in articleStore.hotNewsList">
          <li @click="hotBtn(item.id)">
            <img style="min-width: 140px" :src="item.images"/>
            <span @click="detailNews(item.id)">{{ item.title }}</span>
          </li>
        </ul>

        <!--        头条文章-->
        <div class="hot-title">
          <div class="header">
            <img src="@/assets/images/hot-title.png"/>
            <span>头条文章</span>
          </div>
          <ul class="title">
            <template v-for="(item, index) in articleStore.hotTitleList">
              <li @click="hotBtn(item.id)">
                <span class="num" v-if="index === 0"
                ><img src="@/assets/images/icon_hot_board_stick.svg"
                /></span>
                <span class="num" v-else>{{ index }}</span>
                <p @click="detailNews(item.id)">{{ item.title }}</p>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <hot-title style="margin-top: 80px" ref="hotTitleRef"/>

  <!--  点赞收藏-->
  <lover-collect :article-detail="newsInfo"/>
</template>

<style scoped lang="less">
.detail {
  margin-top: 64px;

  .headers {
    margin-top: 10px;
    height: 64px;
    padding: 0 20px;

    h2 {
      color: #f04142;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 40px;
    height: 100px;
    width: 1130px;

    .left {

      .desc {
        color: #707070;
        margin-top: 20px;
        margin-bottom: 40px;
      }

      h2 {
        font-size: 37px;
      }

      .info {
        margin-bottom: 20px;
      }
    }
  }

  .right {
    margin-left: 30px;

    .person-info {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-bottom: 5px;
      }

      .el-button {
        margin-top: 5px;
      }
    }

    .hot-work {
      font-size: 14px;
      text-align: center;
      margin: 40px 0 20px 0;
    }

    .hot-title {
      margin-top: 10px;

      .header {
        margin-left: 5px;
      }

      img {
        width: 24px;
        height: 22px;
      }

      span {
        margin-left: 10px;
        font-size: 20px;
      }

      .title {
        li:nth-child(2) .num {
          color: #a82e2e;
        }

        li:nth-child(3) .num {
          color: #f04142;
        }

        li:nth-child(4) .num {
          color: #ff9a03;
        }

        li {
          display: flex;
          padding: 12px 0;

          p:hover {
            cursor: pointer;
            color: #f04142;
          }

          .num {
            width: 24px;
            height: 22px;
            color: #999;
            font-size: 16px;

            img {
              margin-left: -5px;
            }
          }
        }
      }
    }
  }

  .hot-news-article {
    li {
      display: flex;
      width: 320px;
      height: 100px;

      img {
        margin-right: 10px;
        height: 70px;
      }

      span:hover {
        cursor: pointer;
        color: #f04142;
      }
    }
  }

  .info {
    img {
      width: 500px;
    }
  }
}
</style>
